<script lang="ts" setup>

import top1 from './components/button.vue'
import top2 from './components/icon.vue'
import top3 from './components/message.vue'
import top4 from './components/MessageBox.vue'
import top5 from './components/Stratch_card.vue'
import top6 from './components/layout.vue'
import top7 from './components/tab.vue'
import top8 from './components/prototype.vue'
import top9 from './components/test.vue'
import top10 from './components/border.vue'
import { ref } from 'vue'

const activeName = ref('ninety')

const handleClick = (tab, event) => {
    console.log(tab, event)
}
const slotProps = ref({
    text: 'content',
    count: 1
})
const item = ref({
    index: 1,
    wow: 'can'
})
</script>
<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="按钮" name="first">
            <top1></top1>
        </el-tab-pane>
        <el-tab-pane label="字体图标" name="second">
            <top2></top2>
        </el-tab-pane>
        <el-tab-pane label="提示消息" name="third">
            <top3></top3>
        </el-tab-pane>
        <el-tab-pane label="提示消息框" name="fourth">
            <top4></top4>
        </el-tab-pane>
        <el-tab-pane label="刮刮乐" name="fivety">
            <top5></top5>
        </el-tab-pane>
        <el-tab-pane label="布局" name="sixty">
            <top6></top6>
        </el-tab-pane>
        <el-tab-pane label="标签" name="seventy">
            <top7 :item="item">
                <template #zuoyongyu="{ info, message }">
                    <p>{{ info }}</p>
                    <p> {{ message }} </p>
                </template>
            </top7>
        </el-tab-pane>
        <el-tab-pane label="原型" name="eighty">
            <top8>

            </top8>
        </el-tab-pane>
        <el-tab-pane label="增删改查" name="ninety">
            <top9>

            </top9>
        </el-tab-pane>
        <el-tab-pane label="边框" name="hundred">
            <top10>

            </top10>
        </el-tab-pane>
    </el-tabs>
</template>



<style></style>